<template>
     <div>
        <h1>求和：{{ sum }}求和后放大50倍：{{ mutiplySum }}</h1>
        <button @click="addSum">点我sum+1</button>
        <hr>
        <!-- src 属性
            作用：指定图片的 URL 地址或路径
            功能：告诉浏览器从哪里加载图片资源
            示例：:src="dog" 表示将 dog 变量的值作为图片的 URL
            alt 属性
            作用：提供图片的替代文本描述
            功能：
            当图片无法加载时显示替代文本
            为视障用户提供图片描述（屏幕阅读器会读取此文本）
            有助于 SEO 优化 -->
        <img class="dog" v-for="(dog,index) in dogList" :key="index" :src="dog" alt="Dog">
        <button @click="getDog">点我获取一个小狗</button>
    </div>
</template>

<script setup lang="ts">
import useDog from '../hooks/useDog';
import { useSum } from '../hooks/useSum';
//解构赋值:useSum函数中返回的对象中的两个属性分别赋值给sum和addSum
const {sum,addSum,mutiplySum}=useSum();
const {dogList,getDog}=useDog();


</script>

<style scoped>
.dog{
    width: 400px;
}
</style>